<script setup>
	import FirstTitle from "@comp/FirstTitle";
	import {
		Editor,
		Toolbar
	} from "@wangeditor/editor-for-vue";
	import {
		onMounted
	} from "vue";
	import {
		searchDataQbxx
	} from "@/api/search";
	import {
		addOrUpdateQbxx
	} from "@/api/addOrUpdate";
	
	import { postTableData } from "@/api/table";



	const city = window.globalObj.name;
	const editorRef = shallowRef();

	const toolbarConfig = {};

	const editorConfig = {
		placeholder: "请输入内容..."
	};
	const mode = ref("default");

	// 加载html
	const initHtml = () => {
		searchDataQbxx({
			m: "力量运用"
		}).then((res) => {
			const {
				data
			} = res
			valueHtml.value = data.find((x) => x.k === "力量运用")?.v || "";
		})
	};

	const handleCreated = (editor) => {
		editorRef.value = editor; // 记录 editor 实例，重要！
	};


	const valueHtml = ref(
		"主要明确情报信息保障力量编组、力量配置和任务区分等。"
	);


	const saveProgramme = () => {
		ElMessageBox.confirm(`确定要保存吗?`, "警告", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
			customClass: "message-box",
		}).then(() => {
			addOrUpdateQbxx({
					m: "力量运用",
					data: [{
						k: "力量运用",
						v: valueHtml.value,
					}, ],
				})
				.then((result) => {
					if (result.code === 200) {
						ElMessage.success("操作成功");
						initHtml();
					} else {
						ElMessage.error(result.msg);
					}
				})
				.catch(() => {});
		});
	}

	
	onBeforeUnmount(() => {
		const editor = editorRef.value;
		if (!editor) return;
		editor.destroy();
	});



	

	// const spanMethod = ({
	// 	row,
	// 	column,
	// 	rowIndex,
	// 	columnIndex
	// }) => {
	// 	if (columnIndex === 1) {
	// 		if (column.property === "c2") {
	// 			if (rowIndex !== 0) {
	// 				return {
	// 					display: "none",
	// 				};
	// 			} else {
	// 				let rowspan = 0;
	// 				tableData.value.forEach((item) => {
	// 					if (row.c2 === item.c2) rowspan++;
	// 				});
	// 				return [rowspan, 1];
	// 			}
	// 		} else {
	// 			return {
	// 				rowspan: 1,
	// 				colspan: 1,
	// 			};
	// 		}
	// 	}
	// };
	// const handerMethodSd = ({
	// 	row,
	// 	column,
	// 	rowIndex,
	// 	columnIndex,
	// 	name
	// }) => {
	// 	nextTick(() => {
	// 		const dom = document.querySelector(`.${column.id}`);
	// 		if (columnIndex === 1 && column.label === name) {
	// 			dom.setAttribute("colspan", 2);
	// 			dom.innerHTML = column.label;
	// 		}
	// 		if (columnIndex === 2 && !column.label) {
	// 			dom.setAttribute("colspan", 0);
	// 			dom.style.display = "none";
	// 		}
	// 	});
	// 	return {};
	// };

	// 表头单元格样式
	const headerCellStyle = () => {
		return {
			backgroundColor: "#f5f7fa",
			color: "rgba(0,0,0,0.85)",
			fontSize: "14px",
			height: "54px",
		};
	};
	// 单元格样式
	const cellStyle = () => {
		return {
			color: "rgba(0,0,0,0.65)",
			fontSize: "14px",
			lineHeight: "22px",
		};
	};
	
	
	const tableData1 = ref([]);
	const tableData2 = ref([]);
	
	const getList1 = () => {
		return postTableData({
			docType: "intelligence",
			method: "qingbaobaozhangliliang",
		}).then(result=>{
			if(result.code === 200){
				tableData1.value = result?.data || []
			}
		})
	}
	
	const getList2 = () => {
		return postTableData({
			docType: "intelligence",
			method: "zhongyaomubiaoqingbaobaozhangliliang",
		}).then(result=>{
			if(result.code === 200){
				tableData2.value = result?.data || []
			}
		})
	}
	onMounted(async () => {
		await initHtml();
		await getList1()
		await getList2()
	});
	
	
	
</script>
<template>
	<div class="">
		<FirstTitle name="力量运用" />
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
				:mode="mode" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig"
				:mode="mode" @onCreated="handleCreated" />
		</div>

		<FirstTitle name="人防情报信息保障" class="top-15" />
		<!-- <div class="top-15">
			力量编组：主要编组XX个通信专业队、XX个信息防护专业队。具体情况如下：
		</div> -->
		<div class="top-15 text-center">
			{{city}}情报信息保障力量编成表
		</div>
		<el-table id="table" :data="tableData1" class="top-15" style="width: 100%" :header-cell-style="headerCellStyle"
			:cell-style="cellStyle" border>
			<el-table-column prop="rowNum" label="序号" width="60" align="center" />
			<el-table-column prop="jd_name" label="行政区划（域）" align="center" />
			<el-table-column prop="type_b" label="专业队类型" align="center" />
			<el-table-column prop="type_x" label="子类型" align="center" />
			<el-table-column  label="编制" align="center" >
				<el-table-column prop="tuan" label="团" align="center" />
				<el-table-column prop="ying" label="营" align="center" />
				<el-table-column prop="lian" label="连" align="center" />
				<el-table-column prop="pai" label="排" align="center" />
			</el-table-column>
			<el-table-column prop="num" label="人数" align="center" />
		</el-table>
		<div class="top-15">
			主要任务：保障各级指挥所之间指挥通信畅通，保障联接各级指挥所的网络、平台、数据安全。
		</div>


		<FirstTitle name="重要目标单位情报信息保障" class="top-15" />
		<!-- <div class="top-15">
			力量编组：主要编组XX个通信专业队、XX个信息防护专业队。具体情况如下：
		</div> -->
		<div class="top-15 text-center">
			{{city}}重要目标单位情报信息保障力量编成表
		</div>

		<el-table id="table" :data="tableData2" class="top-15" style="width: 100%" :header-cell-style="headerCellStyle"
			:cell-style="cellStyle" border>
			<el-table-column prop="rowNum" label="序号" width="60" align="center" />
			<el-table-column prop="jd_name" label="行政区划（域）" align="center" />
			<el-table-column prop="name" label="重要目标名称" align="center" />
			<el-table-column prop="type_name" label="专业队类型" align="center" />
			<el-table-column prop="sub_type_name" label="子类型" align="center" />
			<el-table-column  label="编制" align="center" >
				<el-table-column prop="ying" label="营" align="center" />
				<el-table-column prop="lian" label="连" align="center" />
				<el-table-column prop="pai" label="排" align="center" />
				<el-table-column prop="ban" label="班" align="center" />
			</el-table-column>
			<el-table-column prop="total" label="人数" align="center" />
		</el-table>
		<div class="top-15">
			主要任务：保障各级指挥所之间、重要目标单位与本辖区指挥所之间指挥通信畅通，保障联接各级指挥所及重要目标单位联接各级指挥所的网络、平台、数据安全。
		</div>






		<div class="flex-justify-end top-20">
			<el-button type="primary" class="save-btn" @click="saveProgramme">保存</el-button>
		</div>
	</div>
</template>
<style scoped lang="scss"></style>